<template>
	<div>
		<!-- <textarea id="textarea" v-model="content" placeholder="您的评论" /> -->
		<el-input id="textarea" type="textarea" :autosize="{ minRows: 3, maxRows: 7 }" placeholder="请输入内容"
			v-model="content">
		</el-input>

		<div style="display: flex;justify-content: space-between;">
			<div @click="show" :class="{color:showemoji==true}">
				<i class="iconfont icon-biaoqing" style="padding: 10px;font-size: 25px; cursor: pointer;"> </i>
			</div>
			<button class="btn" @click="isSued">发布</button>
		</div>

		<div class="face" v-if="showemoji">
			<Picker @select="showEmoji" :i18n="I18N" />
		</div>
	</div>
</template>

<script>
	import {
		Picker
	} from "emoji-mart-vue";
	const I18N = {
		search: '搜索',
		notfound: 'No Emoji Found',
		categories: {
			search: '搜索结果',
			recent: '经常使用',
			smileys: '表情与情感',
			people: '人物与身体',
			nature: '动物与自然',
			foods: '食物与饮料',
			activity: '活动',
			places: '旅行与地理',
			objects: '物品',
			symbols: '符号标志',
			flags: '旗帜',
			custom: 'Custom',
		},
	}
	export default {
		components: {
			Picker
		},
		props: ["isComment", "ArticeId", "ToUserId"],
		data() {
			return {
				content: '',
				I18N: I18N,
				showemoji: false,
				commentsParams: {
					articleId: null,
					authorId: null,
					content: "",
					parent: null,
					toUserId: null //给谁评价
				},
			}
		},
		methods: {
			show() {
				if (this.showemoji) {
					this.showemoji = false
				} else {
					this.showemoji = true
				}
			},
			// 选择表情
			showEmoji(emoji) {
				const str = emoji.native
				var oText = document.getElementById('textarea')
				var index = this.getCursortPosition(oText)
				this.$nextTick(() => {
					this.insert(oText, str, index)
				})
			},
			// 插入表情
			insert(oText, varstr, index) {
				var text = this.content
				let startStr = text.substring(0, index)
				let endStr = text.substring(index, text.length)
				this.content = startStr + varstr + endStr
				setTimeout(() => {
					this.setCaretPosition(oText, index + 2)
				}, 10);
			},

			// 获取光标位置
			getCursortPosition(obj) {
				var cursorIndex = 0
				if (document.selection) {
					obj.focus()
					var range = document.selection.createRange()
					range.moveStart('character', -obj.value.length)
					cursorIndex = range.text.length
				} else if (obj.selectionStart || obj.selectionStart == 0) {
					cursorIndex = obj.selectionStart
				}
				return cursorIndex
			},

			// 设置光标位置
			setCaretPosition(ctrl, pos) {
				if (ctrl.setSelectionRange) {
					ctrl.focus();
					ctrl.setSelectionRange(pos, pos);
				} else if (ctrl.createTextRange) {
					var range = ctrl.createTextRange();
					range.collapse(true);
					range.moveEnd('character', pos);
					range.moveStart('character', pos);
					range.select();
				}
			},
			// 发布
			isSued() {
				this.commentsParams.articleId = this.ArticeId
				this.commentsParams.authorId = this.$store.state.UserInfo.id
				this.commentsParams.toUserId = this.ToUserId
				this.commentsParams.content = this.content
				console.log(this.commentsParams);
				if (this.isComment !== 1) {
					return this.$message.warning("本文作者已关闭评论功能！")
				}
				this.$api.detail.createComments(this.commentsParams).then(res => {
					if (res.code == 200) {
						this.content = ""
						this.$message.success("评论成功")
						this.$emit("getList")
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.btn {
		height: 30px;
		width: 50px;
		margin: 10px;
		border: 0px;
		background-color: #edf9e6;
		color: #b2d77e;
		border-radius: 10px;
		cursor: pointer;
	}

	.color {
		color: #b2d77e;
	}

	/deep/ .emoji-mart {
		width: 100% !important;
	}

	/* 	textarea {
		width: 100%;
		height: 100px;
		padding: 10px;
		line-height: 24px;
	} */
</style>